<template>
  <div>
    <div>

      <img id="bottom" :src="require(`../assets/images/${item.photoFile}`)" />
      <span id="con">{{item.name}}</span>
      <br>
      <span id="com">价格 :¥{{item.price}}</span>
      <span class="jjj">
        <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
      </span>
      <span id="cop">
        <button @click="addToShop">加入购物车</button>
      </span>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        num: 1,
        item: JSON.parse(window.sessionStorage.getItem('itemDesc')),
      }
    },
    methods: {
      handleChange(value) {
        console.log(value);
      },
      async addToShop() {
        if (!JSON.parse(window.sessionStorage.getItem("rsp"))) {
          this.$router.push('/login')
        } else {
          var ShoppingVo = {
            itemList: this.item,
            parentId: JSON.parse(window.sessionStorage.getItem("rsp")).id,
            num: this.num
          }
          await this.$http.post("/aj-shoppingAdd", ShoppingVo)
          alert("成功")
          window.location.reload()
        }
      }
    }
  }
</script>

<style>
  #bottom {
    width: 500px;
    height: 500px;
    float: left;
    padding-left: 470px;

  }

  #con {
    font-size: 20px;
    position: absolute;
    padding-left: 50px;
  }

  #com {
    position: relative;
    top: 50px;
    padding-left: 50px;
  }

  #cop {
    position: relative;
    top: 250px;
    right: 270px;
  }

  #cop button {
    border: white;
    width: 200px;
    height: 50px;
    background-color: red;
    color: white;
  }

  .jjj {
    position: relative;
    top: 130px;
    right: 90px;
  }
</style>
